<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>网站信息</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="stroeInfo"
      label-width="auto"
      :rules="rules"
      status-icon
    >
      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="标题" prop="webTitle">
          <el-input
            v-model="stroeInfo.webTitle"
            placeholder="请输入标题"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="版权" prop="copyright">
          <el-input
            v-model="stroeInfo.copyright"
            placeholder="请输入版权"
            clearable
          />
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="图标" prop="icon">
          <upLoad
            :limit="1"
            :modelValue="stroeInfo.webFavicon"
            @update:modelValue="(val) => (stroeInfo.webFavicon = val)"
          />
        </el-form-item>

        <el-form-item class="form_item el-col-10" label="水印" prop="watermark">
          <upLoad
            :limit="1"
            :modelValue="stroeInfo.watermark"
            @update:modelValue="(val) => (stroeInfo.watermark = val)"
          />
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="Logo" prop="logo">
          <upLoad
            :limit="1"
            :modelValue="stroeInfo.webLogo"
            @update:modelValue="(val) => (stroeInfo.webLogo = val)"
          />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="SmallLogo"
          prop="smalllogo"
        >
          <upLoad
            :limit="1"
            :modelValue="stroeInfo.websmallLog"
            @update:modelValue="(val) => (stroeInfo.websmallLog = val)"
          />
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item class="form_item el-col-10" label="二维码" prop="qrUrl">
          <upLoad
            :limit="1"
            :modelValue="stroeInfo.qrUrl"
            @update:modelValue="(val) => (stroeInfo.qrUrl = val)"
          />
        </el-form-item>
      </el-row>

      <el-row class="el-col-24">
        <el-form-item
          class="form_item el-col-10"
          label="Wx地址"
          prop="wxapplink"
        >
          <el-input
            v-model="stroeInfo.wxapplink"
            placeholder="请输入微信地址"
            clearable
          />
        </el-form-item>

        <el-form-item
          class="form_item el-col-10"
          label="App地址"
          prop="appdownaddr"
        >
          <el-input
            v-model="stroeInfo.appdownaddr"
            placeholder="请输入App下载地址"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="H5地址" prop="h5addr">
          <el-input
            v-model="stroeInfo.h5addr"
            placeholder="请输入H5地址"
            clearable
          />
        </el-form-item>
        <el-form-item
          class="form_item el-col-10"
          label="小程序地址"
          prop="xcxaddr"
        >
          <el-input
            v-model="stroeInfo.xcxaddr"
            placeholder="请输入小程序地址"
            clearable
          />
        </el-form-item>
        <el-form-item class="form_item el-col-10" label="交流群" prop="group">
          <el-input
            v-model="stroeInfo.jiaoliuqun"
            placeholder="请输入交流群地址"
            clearable
          />
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item
          class="form_item el-col-10"
          label="电话"
          v-for="(item, index) in stroeInfo.kefumobile"
          :key="index"
        >
          <div class="row alitem" style="width: 100%">
            <el-input
              v-model="stroeInfo.kefumobile[index]"
              placeholder="请输入电话"
              clearable
            />
            &nbsp;&nbsp;
            <el-icon @click="onClickDelPhone(index)">
              <Delete style="cursor: pointer" />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item class="form_item el-col-10" label=" ">
          <el-button @click="onClickAddPhone">添加电话</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-divider />
    <div class="right">
      <el-button type="primary" class="height40" @click="submit"
        >提交</el-button
      >
    </div>
  </el-card>
</template>

<script setup>
import upLoad from '@/components/ImageUpload2';
import { ElMessage } from 'element-plus';
import { instiutionalEdit, instiutionalInfo } from '@/api/institutional/index';
import { reactive, onMounted } from 'vue';

const { proxy } = getCurrentInstance();

const stroeInfo = reactive({
  webTitle: '',
  copyright: '',
  appdownaddr: '',
  h5addr: '',
  xcxaddr: '',
  jiaoliuqun: '',
  kefumobile: [],
  webFavicon: '',
  watermark: '',
  webLogo: '',
  websmallLog: '',
  qrUrl: '',
});

const rules = {
  webTitle: [{ required: true, trigger: 'blur', message: '请输入标题' }],
  copyright: [{ required: true, trigger: 'blur', message: '请输入版权' }],
};

// 删除电话
function onClickDelPhone(index) {
  stroeInfo.kefumobile.splice(index, 1);
}

// 添加电话
function onClickAddPhone() {
  stroeInfo.kefumobile.push('');
}

// 提交
function submit() {
  proxy.$refs.ruleFormRef.validate((valid) => {
    if (valid) {
      instiutionalEdit(stroeInfo).then((res) => {
        if (res.code == 20000) {
          ElMessage.success('保存成功');
        }
      });
    }
  });
}

// 初始化数据
function initData() {
  instiutionalInfo().then((res) => {
    const { data } = res;
    Object.assign(stroeInfo, data);
  });
}

onMounted(() => {
  initData();
});
</script>

<style scoped>
:deep(.el-upload--picture-card) {
  width: 70px;
  height: 70px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 70px;
  height: 70px;
}

.form_item {
  margin-bottom: 20px !important;
  margin-right: 20px;
}

.right {
  margin-left: 40px;
}
</style>
